<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .icon {
            width: 134px;
            height: 134px;
            background: #000 url(../images/i_icon1.png) no-repeat;
        }

        .a {
            background-position: -303px 0;
        }

        .b {
            background-position: -615px 0;
        }

        .c {
            background-position: -928px 0;
        }
    </style>
</head>

<body>

    <!-- 
        css图片整合技术：把网页中的图片放在一张图片上，然后使用背景定位的方法显示图片
            优点：减少服务器的请求次数，减少图片的体积
            缺点：不利于维护

        实现的核心：background-position   改变背景图的位置

        英文： css sprites

        别名  精灵图   雪碧图



        图片文件较大，且需要向服务器发送请求，图片的加载会大大的影响页面的加载速度

        经常改变的图片使用  img 
        不经常更换的图片使用背景图
     -->

    <div class="a icon"></div>

    <div class="b icon"></div>

    <div class="c icon"></div>

</body>

</html>